import React,{useState,useEffect,useRef} from 'react';
import {Image,TouchableOpacity,StyleSheet,Animated,View} from 'react-native';
import icon_heart_empty  from '../assets/icon_heart_empty.png';
import icon_heart  from '../assets/icon_heart.png';

type Props ={
    value: boolean;
    onValueChanged?: (value: boolean)=>void;
    size: number

}
export default (props:Props)=>{
    const [showState,setShowState] = useState(false);
    const {value, onValueChanged,size}= props;
    const  scale = useRef<Animated.Value>(new  Animated.Value(0)).current;
    const  alpha = useRef<Animated.Value>(new Animated.Value(0)).current;
    useEffect(()=>{
        setShowState(value);
    },[value]);
    const onHeaderPress = ()=> {
        const  newState = !showState;
        setShowState(newState);
        onValueChanged?.(newState);
        if (newState) {
            alpha.setValue(1);
            const scaleAnimate = Animated.timing(scale, {
                toValue: 1.8,
                duration: 300,
                useNativeDriver: false
            });
            const alphaAnimate = Animated.timing(alpha, {
                toValue: 0,
                duration: 400,
                delay: 200,
                useNativeDriver: false
            });
            Animated.parallel([scaleAnimate, alphaAnimate]).start();
        }else{
            scale.setValue(0);
            alpha.setValue(0);
        }
    }
    return (
        <TouchableOpacity onPress={onHeaderPress}>
            <Image style={[styles.container,{width: size,height: size}]} source={showState?icon_heart:icon_heart_empty} />
            <Animated.View style={{
                width: size,
                height: size,
                borderRadius: size/ 2,
                borderWidth: size/ 20,
            
                position: 'absolute',
                borderColor:'#ff2442',
                transform: [
                    {scale:scale}
                ],
                opacity: alpha
            }} />

           
        </TouchableOpacity>
    )
}
const  styles  =StyleSheet.create({
   container:{
    width: 20,
    height: 20,
    resizeMode: 'contain'
   }
})